<template>
  <div>
    <el-container>

      <el-header style="background-color: white; width: 100%;position: fixed;z-index: 99 ;border-bottom: rgba(99,99,99,0.2) 1px solid">
        <div style="margin: 0 auto;width: 1000px;background-color: white;height: 59px;border-bottom: rgba(99,99,99,0.2) 1px solid">
          <!--            头部的部分-->

          <div style="float: left;display: inline-block">
            <a  href="/" style="">
              <img  style="height: 30px;margin-top: 13px"   src="header.png">
            </a>
          </div>
          <div style="margin: 0 auto;display: inline-block;">
            <el-menu :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal" @select="handleSelect" >
              <el-menu-item index="1"><a  @click="$router.push('/homepage')" style="margin: 0 20px">首页</a></el-menu-item>
              <!--submenu子菜单-->

              <el-submenu index="2" style="margin: 0 20px">
                <template slot="title"><a @click="$router.push('/recipe')">菜谱</a></template>
                <div class="ctip" style="display: block;width: 600px;height: 650px;padding: 20px 20px">
                  <div class="ctab-clearfix">
                    <a href="/jingxuan/" target="_blank"><img src="https://cp1.douguo.com/static/nweb/images/jx3.png" alt="" width="12px"> 精选</a>
                    <a href="/zuixin/" target="_blank"> <img src="https://i1.douguo.com/upload/banner/1585648022.png" alt="" style="margin-right:4px;"  width="12px">最新</a>
                    <a href="/caidan" target="_blank"><img src="https://cp1.douguo.com/static/nweb/images/menu3.png" alt=""  width="12px"> 菜单</a>
                  </div>
                  <div class="cblok clearfix">
                    <div class="citem clearfix">
                      <span>常见菜式</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/家常菜" target="_blank">家常菜</a>
                        <a href="/caipu/热菜" target="_blank">热菜</a>
                        <a href="/caipu/凉菜" target="_blank">凉菜</a>
                        <a href="/caipu/主食" target="_blank">主食</a>
                        <a href="/caipu/汤" target="_blank">汤</a>
                        <a href="/caipu/早餐" target="_blank">早餐</a>
                        <a href="/caipu/午餐" target="_blank">午餐</a>
                        <a href="/caipu/海鲜" target="_blank">海鲜</a>
                        <a href="/caipu/孕妇" target="_blank">孕妇</a>
                        <a href="/caipu/甜品" target="_blank">甜品</a>
                        <a href="/caipu/粥" target="_blank">粥</a>
                        <a href="/caipu/宝宝食谱" target="_blank">宝宝食谱</a>
                        <a href="/caipu/糕点" target="_blank">糕点</a>
                        <a href="/caipu/微波炉" target="_blank">微波炉</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>中国菜系</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/川菜" target="_blank">川菜</a>
                        <a href="/caipu/粤菜" target="_blank">粤菜</a>
                        <a href="/caipu/东北菜" target="_blank">东北菜</a>
                        <a href="/caipu/湘菜" target="_blank">湘菜</a>
                        <a href="/caipu/鲁菜" target="_blank">鲁菜</a>
                        <a href="/caipu/浙菜" target="_blank">浙菜</a>
                        <a href="/caipu/湖北菜" target="_blank">湖北菜</a>
                        <a href="/caipu/清真菜" target="_blank">清真菜</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>外国食谱</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/韩国" target="_blank">韩国</a>
                        <a href="/caipu/日本料理" target="_blank">日本料理</a>
                        <a href="/caipu/法国" target="_blank">法国</a>
                        <a href="/caipu/意大利餐" target="_blank">意大利餐</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>各地小吃</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/四川小吃" target="_blank">四川小吃</a>
                        <a href="/caipu/广东小吃" target="_blank">广东小吃</a>
                        <a href="/caipu/北京小吃" target="_blank">北京小吃</a>
                        <a href="/caipu/陕西小吃" target="_blank">陕西小吃</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>烘焙大全</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/蛋糕" target="_blank">蛋糕</a>
                        <a href="/caipu/面包" target="_blank">面包</a>
                        <a href="/caipu/饼干" target="_blank">饼干</a>
                        <a href="/caipu/披萨" target="_blank">披萨</a>
                        <a href="/caipu/甜品" target="_blank">甜品</a>
                      </div>
                    </div>
                  </div>
                  <div class="cmore" style="height: 50px">
                    <a href="/category" target="_self" style="width: 130px;margin-top: 30px">查看全部分类 <img src="https://cp1.douguo.com/static/nweb/images/more2.png" alt=""></a>
                  </div>
                </div>

              </el-submenu>

              <!--              todo 跳转到笔记-->
              <el-menu-item index="3" style="margin: 0 20px"><a @click="$router.push('/homepage')" style="text-decoration: none">笔记</a></el-menu-item>

              <div style="float: right;position: relative;top: 20px">
                <el-input type="text" placeholder="搜索菜品 菜单 食材" v-model="search">
                  <!--                  todo 搜索后  根据关键词展示菜谱列表  -->
                  <el-button slot="append" icon="el-icon-search" @click="searchRecipe()"></el-button>
                  <span><a href="javascript:void(0);"></a></span>
                </el-input>
              </div>
            </el-menu>
          </div>



          <!-- 显示当前登录的用户信息 -->
          <div class="login-user" style="float: right;display: inline-block;margin-top:15px;margin-left: 25px">

            <el-dropdown>
              <el-avatar src="https://tx1.douguo.com/upload/photo/1/1/1/70_bae22c4e259baa27f6b091c7b0974787.png"
                         size="big"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">发布菜谱</el-dropdown-item>
                <el-dropdown-item icon="el-icon-plus">发布笔记</el-dropdown-item>
                <el-dropdown-item icon="el-icon-plus">修改资料</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">修改头像</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">修改密码</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div style="float: right;display: inline-block;padding-top:20px;padding-right:5px;margin-left: 0px;"><a href="" style="display: inline-block;
      width: 60px;
      height: 25px;
      text-align: center;
      line-height: 23px;
      background: #FFB31A;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      text-decoration: none;">发布</a></div>


        </div>
      </el-header>

      <el-main >

        <div id="content" class="clearfix">
          <div class="person-info clearfix mt30">
            <a href="/u/u87484275932490.html" style="background: url(https://tx1.douguo.com/upload/photo/1/1/1/140_bae22c4e259baa27f6b091c7b0974787.png) no-repeat center center;background-size:cover;" class="person-img left">

            </a>
            <div class="info left">
              <a class="nickname" href="/u/u87484275932490.html">用户A</a>
              <p class="sex"><i class="male"></i> </p>
              <p class="relative point">经验值：
                <a class="point-btn" href="javascript:void(0);" onmouseover="javascript:$('.point-code').show();" onmouseout="javascript:$('.point-code').hide();">35</a>
              </p>
              <p class="relative point"> IP属地:
                · 天津市

              </p>
              <p class="intro">
                <span></span>
              </p>
            </div>
            <div class="right">
              <div class="fav-fans">
                <div class="left">
                  <a href="http://www.douguo.com/u/u87484275932490/friends">
                    <p class="count"> 0  </p>
                    <p class="text">关注</p>
                  </a>
                </div>
                <div class="left">
                  <a href="http://www.douguo.com/u/u87484275932490/fans">
                    <p class="count"> 0 </p>
                    <p class="text">粉丝</p>
                  </a>
                </div>
                <div class="left">
                  <a href="http://www.douguo.com/u/u87484275932490/recipe">
                    <p class="count"> 0  </p>
                    <p class="text">菜谱</p>
                  </a>
                </div>
                <div class="left">
                  <a href="http://www.douguo.com/u/u87484275932490/dish">
                    <p class="count"> 0  </p>
                    <p class="text">笔记</p>
                  </a>
                </div>
              </div>
            </div>
          </div>


          <div class="type-head clearfix" style="width: 376px;height: 42px">
            <a href="/u/u87484275932490.html" class="active">概览</a>
            <a href="/u/u87484275932490/recipe">菜谱</a>
            <a href="/u/u87484275932490/caidan">菜单</a>
            <a href="/u/u87484275932490/dish">笔记</a>
            <a href="/u/u87484275932490/collect">
              收藏</a>
            <!--  -->
            <!--  -->
            <a href="/u/u87484275932490/diet">美食日记</a>
          </div>
          <h3 class="not-menu">暂无数据～</h3>
          <p class="fcc" style="padding-top:60px;">
            你当前的位置：<a href="/" target="_blank">豆果美食</a> &gt; 个人中心
          </p>
        </div>




        <el-scrollbar class="page-scroll">
          <!-- 将由其它视图组件来显示 -->
          <router-view/>
        </el-scrollbar>
      </el-main>
      <el-footer>
        <div id="footer">
          <div class="dginfo">
            <div class="dgintro">
              <div class="logo3">
                <img class="wb100" src="https://cp1.douguo.com//static/nweb/images/logo3.png?20191218" alt="豆果美食logo">
              </div>
              <div class="datainfo">
                <p><span>500万+</span>美食菜谱；<span>2000万+</span>互动内容；<span>3000+</span>美食课堂；<span>5000万+</span>用户每天都有新分享</p>
              </div>
              <div class="threbl">
                <h3>扫二维码，下载豆果手机应用：</h3>
                <ul>
                  <li style="list-style-type: none">
                    <a href="javascript:void(0);" class="emdgms">
                      <img width="92" height="92" src="https://cp1.douguo.com//static/nweb/images/qrcode.png?2001" alt="豆果美食">
                    </a>豆果美食
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="emwx">
                      <img width="92" height="92" src="https://cp1.douguo.com//static/nweb/images/xcx.jpg?2001" alt="豆果美食">
                    </a>微信扫一扫
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="emdgms">
                      <img width="92" height="92" src="https://i1.douguo.com//upload/banner/1578991488.png" alt="豆果美食">
                    </a>豆果公众号
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="foot">
            <div class="clink relative">
              <a href="/about/douguo.html" rel="nofollow" target="_blank">关于豆果</a> ·
              <a href="/about/comeon.html" rel="nofollow" target="_blank">在豆果工作</a> ·
              <a href="/user/feedback" rel="nofollow" target="_blank">意见反馈</a> ·

              <a href="/allrecipes" target="_blank">菜谱大全</a>
            </div>
            <div class="cght" style="text-align: center;">
              <a href="https://www.douguo.com" target="_blank">北京豆果信息技术有限公司</a>
              <span>京ICP证111032号</span>
              <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502038268">
                <img src="https://i1.douguo.com//upload/banner/1564469142.png" lazysrc="" style="margin-bottom: -3px;width:20px">
                京公网安备 11010502038268号
              </a>
              <a target="_blank" href="http://beian.miit.gov.cn">
                京ICP备09012748号
              </a>
              <p style="margin:5px 0;cursor: pointer;" onclick="$('.smask2').show();$('.medicinal_box').show();">互联网药品信息服务资格证书</p>
              <a href="http://sq.ccm.gov.cn/ccnt/sczr/doLogin" target="_blank">
                <img src="https://i1.douguo.com//upload/banner/1522057799.png" style="margin-bottom: -3px;width:20px">
                京网文【2017】6954-770号
              </a> 食品流通许可证SP1101061510252413
              <a href="javascript:void(0);" style="display:block;text-align:center;margin-top:5px;" onclick="$('.smask2').show();$('.tvbox').show();">广播电视节目制作经营许可证（京）字第11624号</a>
              <div class="smask2" style="position:fixed;width:100%;height:100%;top:0;left:0;background: black;z-index:999;display: none;opacity: .6;filter: alpha(opacity=60)"></div>
              <div class="tvbox" style="position: fixed;top:50%;left:50%;z-index:1000;margin-left:-350px;margin-top:-250px;display: none;">
                <img src="https://i1.douguo.com//upload/banner/1551092008.jpg" alt="">
                <img style="position: absolute;top:15px;right:15px;cursor: pointer;" src="https://cp1.douguo.com/static/nweb/images/close.png" alt="" onclick="$('.smask2').hide();$('.tvbox').hide();">
              </div>
              <div class="medicinal_box" style="position: fixed;top:50%;left:50%;z-index:1000;margin-left:-350px;margin-top:-250px;display: none;">
                <img style="display:block;width:700px;" src="https://i1.douguo.com//upload/banner/1577185524.jpg" alt="">
                <img style="position: absolute;top:15px;right:15px;cursor: pointer;" src="https://cp1.douguo.com/static/nweb/images/close.png" alt="" onclick="$('.smask2').hide();$('.medicinal_box').hide();">
              </div>
            </div>
            <div class="botfans" style="padding: 15px 0 20px;text-align: center;">
              <span class="bonefans" style="display: inline-block;width: 64px;overflow: hidden;position: relative;top: 6px;"><iframe width="136" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src="https://widget.weibo.com/relationship/followbutton.php?language=zh_cn&amp;width=136&amp;height=24&amp;uid=1647910344&amp;style=2&amp;;btn=light&amp;dpc=1"></iframe></span>
              <a style="margin-left: 12px;" id="___szfw_logo___" href="https://credit.szfw.org/CX20170707035016320368.html" target="_blank"><img src="https://i1.douguo.com/upload/banner/1528470330.png" border="0" style="height: 22px;margin-top: -1px;"></a>

            </div>
          </div>
        </div>
      </el-footer>
    </el-container>


  </div>
</template>

<!--<script>-->
<!--function pointshow(){-->
<!--  $(".smask").show();-->
<!--  $("#point-box").show();-->
<!--}-->
<!--</script>-->
<!--<script type="text/javascript">(function () {-->
<!--  document.getElementById('___szfw_logo___').oncontextmenu = function () {-->
<!--    return false;-->
<!--  }-->
<!--})();</script>-->
<script>

export default {
  data() {
    return {
      search:"",
      $:"",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '1',
      activeIndex2: '1',

    }


  },
  methods: {
    handleActiveMenuItem(){
      let currentPath=this.$router.currentRoute.path;
      if(currentPath.startsWith('/sys-admin/product/album')){
        currentPath='/sys-admin/product/album';
      }
      if(currentPath.startsWith('/sys-admin/product/attributeTemplate')){
        currentPath='/sys-admin/product/attributeTemplate';
      }
      if(currentPath.startsWith('/sys-admin/permission/admin')){
        currentPath='/sys-admin/permission/admin';
      }
      this.activeMenuItemPath=currentPath;
    },
    searchRecipe(){
      // let path = this.$router.currentRoute.path;
      // if (path.startsWith('/sys-admin/product/spu/add-new-')) {
      //   path = '/sys-admin/product/spu/add-new-1';
      // }
      this.$router.replace('/');
      this.$router.push("recipe/search?keyword="+this.search);
    },

  },
  mounted() {
    this.handleActiveMenuItem();


  }
}
</script>

<style>
body {
  background: #fff;
  color: #333;
  font: 12px Noto Sans,"思源黑体";
  /*padding-top: 60px;*/
}
.fav-fans .text {
  margin-top: 4px;
}
.right {
  float: right;
}
.person-info .fav-fans {
  width: 320px;
  height: 62px;
  padding: 15px 0;
  border-radius: 4px;
  background: #F1F7FA;
  text-align: center;
}
.person-info .fav-fans > div {
  width: 80px;
  border-right: 1px solid #D1DFE6;
}
type-head clearfix{
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  display: inline-block;
}
.type-head a.active {
  border-bottom: 2px solid #383830;
  font-weight: bold;
  color: #383830;
}
.type-head {
  margin-bottom: 34px;
}
.type-head a {
  display: inline-block;
  float: left;
  color: #383830;
  height: 42px;
  margin: 0px 30px 0px 0px ;
  line-height: 42px;
  font-size: 14px;
}
.person-info .info .point {
  overflow: visible;
}
.person-info .info p {
  margin-top: 11px;
  font-size: 12px;
  line-height: 16px;
  color: #666;
}
.relative {
  position: relative;
}
.male {
  background: url(https://cp1.douguo.com/static/nweb/images/male.png) no-repeat;
  background-size: 100% 100%;
}
.clearfix {
  zoom: 1;
}
element.style {
  background: url(https://tx1.douguo.com/upload/photo/1/1/1/140_bae22c4….png) no-repeat center center;
  background-size: cover;
}
.person-info .person-img {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}
.dgintro .datainfo span {
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 24px;
  color: #84b92c;
  line-height: 160%;
}
.dgintro .datainfo p {
  color: #999;
  line-height: 160%;
  padding-top: 20px;
  width: 960px;
  height: 38.4px;
}

.wb100 {
  display: block;
  width: 147px;
  height: 36.75px;
  margin-top: -60px;
}
.fcc {
  font-size: 13px;
  color: #333;
  line-height: 13px;
  padding: 80px 0 10px;
}
.dgintro {
  width: 1000px;
  position: relative;
  height: 188px;
  margin: 0 auto;
  padding-top: 94px;
}
.dginfo {
  background: #f2f2f2;
}
.dgintro h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}
.dgintro ul li {
  width: 92px;
  float: left;
  margin-right: 12px;
  text-align: center;
  height: 116px;
}
.dgintro .threbl {
  width: 312px;
  position: absolute;
  top: 16px;
  left: 690px;
  height: 143.2px;
}
.dgintro h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}
img {
  vertical-align: bottom;
}
.not-menu {
  width: 1000px;
  margin: 80px 0 330px;
  font-size: 13px;
  text-align: center;
}
.person-info .info .sex {
  margin-top: 8px;
}
a {
  color: #333;
  text-decoration: none;
}
.fav-fans .text {
  margin-top: 4px;
}
.fav-fans .count {
  font-size: 15px;
  line-height: 15px;
}
.person-info .fav-fans {
  width: 320px;
  height: 62px;
  padding: 15px 0;
  border-radius: 4px;
  background: #F1F7FA;
  text-align: center;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.person-info {
  margin: 40px 0 20px;
  padding-bottom: 40px;
  padding-top: 60px;
}
.person-info .info .nickname {
  display: inline-block;
  max-width: 296px;
  margin-top: 9px;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}
.person-info i {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 3px;
  vertical-align: sub;
}
.left {
  float: left;
}
.person-info .info {
  width: 480px;
  position: relative;
}
.clearfix {
  zoom: 1;
}
.person-info .person-img {
  display: inline-block;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}
#content {
  width: 1000px;
  margin: 0 auto;
}
#footer {
  width: 100%;
  margin-top: 30px;
  background: #f8f8f8;
}
#footer .foot {
  width: 1000px;
  margin: 0 auto;
  padding-top: 18px;
}
#footer .clink {
  width: 100%;
  float: left;
  text-align: center;
  margin: 15px 0;
}
.relative {
  position: relative;
}
element.style {
  text-align: center;
}

* {
  box-sizing: border-box;
}

*{margin: 0;
  padding:0
}

a{
  text-decoration: none;
  color: #333333;
}

a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyMenu  .title{font-size: 15px;line-height: 35px}
.dailyMenu  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 4px solid #409EFF;
  color: #303133;
}
.el-menu--horizontal>.el-menu-item, .el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 55px !important;
  line-height: 54px;
}
.ctip a{
  display: inline-block;
  width: 95px;
  height: 30px;
}
.ctip span{
  display: inline-block;
  width: 95px;
  height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0px;
}
.page-scroll .el-scrollbar__wrap {
  overflow-y: hidden;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid rgb(255, 179, 26) !important;
  color: #303133;
}
</style>

